<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="listQuery.name" placeholder="合同名称" clearable style="width: 200px;" class="filter-item" />
      <el-input v-model="listQuery.linker_name" placeholder="对接人" clearable style="width: 200px;" class="filter-item" />
      <el-select v-model="listQuery.projectId" clearable multiple placeholder="请选择所属项目" class="filter-item">
        <el-option
          v-for="(item,key) in projectList"
          :key="key"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-select v-model="listQuery.status" clearable placeholder="请选择合同状态" class="filter-item">
        <el-option
          v-for="(item,key) in projectStatus"
          :key="key"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-button
        v-waves
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        :loading="listLoading"
        @click="handleFilter()"
      >
        {{ listLoading?'加载中':'查找' }}
      </el-button>
      <el-button
        v-waves
        plain
        class="filter-item"
        type="danger"
        :disabled="listLoading"
        @click="clearSearch()"
      >
        清空
      </el-button>
    </div>
    <div class="handle-wrapper">
      <div style="float: right">
        <el-button type="success" @click="showForm()">添加</el-button>
      </div>
    </div>
    <div style="width: 100%; height: 50px">
      <div style="float: right">
        <pagination
          v-show="totalNum>0"
          :total="totalNum"
          :page.sync="listQuery.page"
          :limit.sync="listQuery.limit"
          @pagination="getList"
        />
      </div>
    </div>
    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column type="expand">
        <template slot-scope="scope">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="付款进度">
              <span>
                <el-steps :active="scope.row.level" style="width: 800px">
                  <el-step
                    v-for="value in scope.row.level_total"
                    :key="value"
                    :title="'第'+value+'期款项'"
                    :description="value<=scope.row.level?'已付款':(value==(scope.row.level+1))?'进行中':'未付款' "
                  />
                </el-steps>
              </span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        label="ID"
        prop="id"
        width="100px"
        align="center"
      />
      <el-table-column
        label="合同名称"
        align="center"
        prop="name"
      />
      <el-table-column
        label="所属项目"
        align="center"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.projectInfo.name }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="合同金额"
        align="center"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.price }}元</span>
        </template>
      </el-table-column>
      <el-table-column
        label="已付金额"
        align="center"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.payed }}元</span>
        </template>
      </el-table-column>
      <el-table-column
        label="付费方式"
        align="center"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.pay_type==1">3：3：4</span>
          <span v-if="scope.row.pay_type==2">5：5</span>
          <span v-if="scope.row.pay_type==3">2：3：2：3</span>
          <span v-if="scope.row.pay_type==4">3：2：3：2</span>
        </template>
      </el-table-column>
      <el-table-column
        label="项目状态"
        align="center"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.status==0"><el-tag>未处理</el-tag></span>
          <span v-if="scope.row.status==1"><el-tag type="warning">进行中</el-tag></span>
          <span v-if="scope.row.status==2"><el-tag type="success">已完成</el-tag></span>
        </template>
      </el-table-column>
      <el-table-column
        label="创建时间"
        align="center"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.create_time | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="更新时间"
        align="center"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.update_time | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        width="400px"
      >
        <template slot-scope="scope">
          <el-button type="primary" plain size="mini" @click="showForm(scope.row.id)">编辑</el-button>
          <el-button type="danger" plain size="mini" @click="confirmDelete(scope.row.id)">删除</el-button>
          <el-button
            v-if="scope.row.document_path"
            type="success"
            plain
            size="mini"
            @click="downloadFile(scope.row.document_path)"
          >需求下载
          </el-button>
          <el-button
            v-if="scope.row.contract_path"
            type="warning"
            plain
            size="mini"
            @click="downloadFile(scope.row.contract_path)"
          >合同下载
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="totalNum>0"
      :total="totalNum"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />
  </div>
</template>

<script>
import waves from '@/directive/waves'
import Pagination from '@/components/Pagination'

export default {
  name: 'ProjectIndex',
  components: { Pagination },
  directives: { waves },
  data() {
    return {
      tableKey: 0,
      list: [],
      totalNum: 0,
      listLoading: true,
      listQuery: {
        name: '',
        projectId: [],
        linker_name: '',
        status: '',
        page: 1,
        limit: 20
      },
      formData: {
        id: '',
        name: ''
      },
      projectList: [],
      projectStatus: [
        { 'label': '未处理', value: 0 },
        { 'label': '进行中', value: 1 },
        { 'label': '已完成', value: 2 }
      ],
      dialogFormVisible: false,
      showLoading: false,
      loadingObj: {}
    }
  },
  watch: {
    showLoading: function(val, oldVla) {
      if (val) {
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        this.loadingObj = loading
      } else {
        this.loadingObj.close()
      }
    },
    dialogFormVisible: function(val, oldVla) {
      if (this.$refs.formData !== undefined) {
        this.$refs.formData.resetFields()
      }
    }
  },
  created() {
    this.getList(true)
    this.getProject()
  },
  methods: {
    getProject() {
      const params = {
        limit: 100000
      }
      this.$request({
        url: '/admin/project',
        method: 'get',
        params: params
      }).then((response) => {
        const tempArr = []
        response.data.list.forEach((item) => {
          tempArr.push({
            label: item.name,
            value: item.id
          })
        })
        this.projectList = tempArr
      }).catch((error) => {
        this.$message({
          message: error,
          type: 'warning'
        })
      })
    },
    downloadFile(downloadUrl) {
      window.location.href = downloadUrl
    },
    showForm(id) {
      if (!id) {
        this.$router.push({
          path: 'contract-info',
          query: {}
        })
      } else {
        this.$router.push({
          path: 'contract-info',
          query: { id }
        })
      }
    },
    confirmDelete(id) {
      this.$confirm('是否确定删除当前记录?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.delete(id)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    delete(id) {
      this.$request({
        url: '/admin/contract/' + id,
        method: 'delete'
      }).then((response) => {
        if (response.code === 200) {
          this.$message({
            message: '删除成功！',
            type: 'success'
          })
          this.handleFilter()
        }
      }).catch(() => {
        this.listLoading = false
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList(true)
    },
    clearSearch() {
      this.listQuery.code = ''
      this.listQuery.name = ''
      this.listQuery.projectId = []
      this.listQuery.linker_name = ''
      this.listQuery.status = ''
      this.listQuery.page = ''
      this.handleFilter()
    },
    getList(showRecord = false) {
      this.listLoading = true
      const params = this.listQuery
      this.$request({
        url: '/admin/contract',
        method: 'get',
        params: params
      }).then((response) => {
        this.list = response.data.list
        this.totalNum = response.data.totalNum
        if (showRecord === true) {
          this.$notify({
            title: '搜索成功',
            message: '已经为您搜索到条' + this.totalNum + '数据！',
            type: 'success'
          })
        }
        this.listLoading = false
      }).catch(() => {
        this.listLoading = false
      })
    }
  }
}
</script>
<style scoped>
  .handle-wrapper {
    width: 100%;
    height: 50px;
    line-height: 45px;
    border-top: 1px #DCDCDC solid;
    border-bottom: 1px dashed #DCDCDC
  }
</style>
